Ad-hoc tools

RStudio

Lecture 8

Visualisation beyond Excel

Visualisation geometries

Visualisation beyond Excel

Bar chart

Stream graph

Geometry in d3.js

Stream

Issues:

  • too noisy
  • exacting to data

Maps

Maps

Issues:

  • different region sizes
  • Shape & distance doesn't matter (look for distorted maps)

Density Maps

City Maps

Wordcloud

Wordcloud

Issues:

  • Size and tail doesn't matter
  • Wow-effect (especially when cloud is shaped)

Networks

Network

Networks-2

Issues:

  • Layouts:
    • Force directed
    • Fruchterman reingold
    • Circular
  • Ball of fur

Want to try? Use Gephi

Alt: GraphVis

Sunburst

Pie chart \( \rightarrow \) Donut \( \rightarrow \) Sunburst

Sunburst

Issues:

  • The same as for Piechart

Treemap

Treemap

  • Slice and dice algorithm

Treemap-2

Treemap

Issues:

  • Pieces far from squares

Treemap-3

Voronoi-tesselation treemaps

Voronoi treemap

Heatmap

Heatmap

Heatmap

Good for large data:

Volcano Heatmap

Heatmap

Patterns in huge data

Riyadh Twitter

Waterfall

Widely used by McKinsey & Company

Waterfall

Bullet chart

Bar chart evolution

Waterfall

Waterfall

Error bar

Errorbar

Range

Good for smoothing, confidence intervals

Range

Stock-charts (Candles, OHLC)

OHLC

Stock-charts (Candles, OHLC)

OHLC

Gauges

Gauges

Etc

  • Pictorals
  • Funnels
  • Calendar/table (kind of heatmap)
  • Chords
  • Bubbles (NYT Bubbles)
  • Gantt charts
  • 'Spyders'

Services

Mood'o'Meter

Full size

Infogr.am: https://infogr.am

Example

Example

Infogr.am

Chart types

  • Multiple chart types
  • Several themes
  • Only roll-type infographics
  • Freemium model

Infogr.am prices

Infogram price

Piktochart: http://piktochart.com

Templates

  • More like a canvas
  • Harder to start
  • More additional elements (icons, shapes, etc)
  • Freemium model
  • Better prices

Piktochart prices

Piktochart price

Capsidea

https://capsidea.com

  • From Perm with love
  • Some sort of Tableau
  • Not for web-publishing
  • Today: raw

Cloud Highcharts

http://cloud.highcharts.com

Logo

Few geoms: line/area, column/bar, scatter/bubble, pie

But, hopefully, it will be developed

Raw DensityDesign

http://raw.densitydesign.org

Alternative approach: let's implement exotic geometries first

Raw treemap

Raw DensityDesign

http://raw.densitydesign.org

Bubbles, density, streams, treemaps

Raw flow

Wordle

http://www.wordle.net/

The most well known wordcloud web application

Wordcloud

Timeline

http://timeline.knightlab.com/

Timeline

Test timeline

Google Charts

Google charts

Google Charts

function drawChart() {
  var data = google.visualization.arrayToDataTable([['Age','Weight'],[8,12],[4,5.5],[11,14],[4,5],[3,3.5],[6.5,7]]);
  var options = {
    title: 'Age vs. Weight comparison',
    hAxis: {title: 'Age', minValue: 0, maxValue: 15},
    vAxis: {title: 'Weight', minValue: 0, maxValue: 15}
  };
  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

Google Charts

Geometries

Without JavaScript try it on Google Spreadsheets

https://docs.google.com/spreadsheets/

Highcharts

http://www.highcharts.com/

Highcharts

Highcharts

http://www.highcharts.com/

Tree different apps:

  • Highcharts
  • Highstocks
  • Highmaps
  • TBD: 'Highgantt'

Highcharts

  $('#container').highcharts('StockChart', {
      title : {
          text : 'AAPL Stock Price'
      },
      series : [{
          name : 'AAPL',
          data : data,
          tooltip: {
              valueDecimals: 2
          }
      }]
  });

Highcharts

View demo:

d3.js

d3 = Data Driven Documents

Connects data with DOM elements

http://www.d3js.org

Gallery

d3.js my attempts

http://quatsch.pythonanywhere.com/locality/8c6edcef7955444b34269a8685b9b0dd

http://quatsch.pythonanywhere.com/stats_detail/8c6edcef7955444b34269a8685b9b0dd

https://nostromo.kaspersky.com/vendors/